<template>
  <div class="mainbox center">
    <img
      src="@/images/mx1gz2.png"
      class="xjimg"
      v-if="taskids == 2.13 && mxid == 1"
    />
    <img
      src="@/images/mx1gz2.png"
      class="xjimg"
      v-if="taskids == 2.14 && mxid == 1"
      @click="gotasks(2.15)"
    />
    <img
      src="@/images/mx1gz3.png"
      class="xjimg"
      v-if="taskids == 2.15 && mxid == 1"
      @click="gotasks(2.16)"
    />
    <img
      src="@/images/mx1gz4.png"
      class="xjimg"
      v-if="taskids == 2.16 && mxid == 1"
      @click="gotasks(2.2)"
    />
    <img
      src="@/images/mx1gz7.png"
      v-if="taskids == 2.3 && mxid == 1"
      class="xjimg"
      @click="gotasks(2.31)"
    />
    <img
      src="@/images/mx1gz8.png"
      v-if="taskids == 2.31 && mxid == 1"
      class="xjimg"
      @click="gotasks(3.1)"
    />
    <!-- 扫描定位线 -->
    <img
      src="@/images/mx1gz5.png"
      v-if="taskids == 2.2 && mxid == 1"
      class="xjimg"
      @click="gotasks(2.21)"
    />
    <img
      src="@/images/mx1gz6.png"
      v-if="taskids == 2.21 && mxid == 1"
      class="xjimg"
    />
    <!-- 选择模型2的时候如下 -->
    <img
      src="@/images/mx2gz2.png"
      class="xjimg"
      v-if="taskids == 2.13 && mxid == 2"
    />
    <img
      src="@/images/mx2gz2.png"
      class="xjimg"
      v-if="taskids == 2.14 && mxid == 2"
      @click="gotasks(2.15)"
    />
    <img
      src="@/images/mx2gz3.png"
      class="xjimg"
      v-if="taskids == 2.15 && mxid == 2"
      @click="gotasks(2.16)"
    />
    <img
      src="@/images/mx2gz4.png"
      class="xjimg"
      v-if="taskids == 2.16 && mxid == 2"
      @click="gotasks(2.2)"
    />
    <!-- 扫描定位线 -->
    <img
      src="@/images/mx2gz5.png"
      v-if="taskids == 2.2 && mxid == 2"
      class="xjimg"
      @click="gotasks(2.21)"
    />
    <img
      src="@/images/mx2gz6.png"
      v-if="taskids == 2.21 && mxid == 2"
      class="xjimg"
    />
    <img
      src="@/images/mx2gz7.png"
      v-if="taskids == 2.3 && mxid == 2"
      class="xjimg"
      @click="gotasks(2.31)"
    />
    <img
      src="@/images/mx2gz8.png"
      v-if="taskids == 2.31 && mxid == 2"
      class="xjimg"
      @click="gotasks(3.1)"
    />

    <!-- 输入框 -->
    <el-input
      v-model="hzname"
      placeholder="请输入姓名"
      class="hzbh hzname"
      ref="hzname"
      v-if="taskids < 2.16"
    ></el-input>
    <el-input
      v-model="hzage"
      placeholder="请输入年龄"
      class="hzbh hzage"
      ref="hzage"
      v-if="taskids < 2.16"
    ></el-input>

    <el-radio v-model="radio" label="1" class="hzhex" v-if="taskids < 2.16"
      >其他</el-radio
    >
    <!-- 测量中心数值 -->
    <!-- 模块1 -->
    <div class="center">
      <!-- 背景     v-if="taskids == 2.31 && mxid == 2"-->
      <img src="@/images/mx1gz9.png" class="xjimg" />
      <!-- 可拖动div -->
      <div
        class="ktdiv"
        :style="{
          width: width + 'px',
          height: height + 'px',
          left: x + 'px',
          top: y + 'px'
        }"
        @mousedown="startDrag"
        ref="draggableDiv"
      >
        <!-- 右下角调整大小的手柄 -->
        <div class="resize-handle" @mousedown.stop="startResize"></div>
      </div>
    </div>

    <!-- 测量中心数值完成 -->
  </div>
</template>

<script>
export default {
  props: {
    mxid: {
      type: Number // 注意：这里修正了typeof的拼写错误
    },
    taskids: {
      type: Number
    }
  },
  components: {},
  data() {
    return {
      hzname: '',
      hzage: '',
      radio: '',
      // 初始位置和大小（不改变您原有的设置）
      x: 300,
      y: 300,
      width: 200,
      height: 100,

      // 拖动相关变量
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0,
      initialX: 0,
      initialY: 0,

      // 调整大小相关变量
      isResizing: false,
      resizeStartX: 0,
      resizeStartY: 0,
      initialWidth: 0,
      initialHeight: 0
    }
  },
  computed: {},
  watch: {
    // 监听姓名变化
    hzname() {
      this.checkAllFilled()
    },
    // 监听年龄变化
    hzage() {
      this.checkAllFilled()
    },
    // 监听单选框变化
    radio() {
      this.checkAllFilled()
    }
  },
  methods: {
    // 检查所有字段是否都已填写
    checkAllFilled() {
      // 验证所有字段都有有效值
      if (this.hzname.trim() && this.hzage.trim() && this.radio) {
        this.$emit('gotask', 2.14)
      }
    },
    gotasks(i) {
      this.$emit('gotask', i)
    },
    // 开始拖动
    startDrag(e) {
      // 只有点击div本身（不是调整手柄）才触发拖动
      if (e.target === this.$refs.draggableDiv) {
        this.isDragging = true
        this.dragStartX = e.clientX
        this.dragStartY = e.clientY
        this.initialX = this.x
        this.initialY = this.y

        // 添加拖动中的样式
        this.$refs.draggableDiv.style.cursor = 'move'
      }
    },

    // 开始调整大小
    startResize(e) {
      this.isResizing = true
      this.resizeStartX = e.clientX
      this.resizeStartY = e.clientY
      this.initialWidth = this.width
      this.initialHeight = this.height

      // 添加调整大小时的样式
      this.$refs.draggableDiv.style.cursor = 'se-resize'
    },

    // 处理鼠标移动
    handleMouseMove(e) {
      // 拖动逻辑
      if (this.isDragging) {
        const deltaX = e.clientX - this.dragStartX
        const deltaY = e.clientY - this.dragStartY
        this.x = this.initialX + deltaX
        this.y = this.initialY + deltaY
      }

      // 调整大小逻辑
      if (this.isResizing) {
        const deltaX = e.clientX - this.resizeStartX
        const deltaY = e.clientY - this.resizeStartY

        // 限制最小尺寸，防止div变得太小
        this.width = Math.max(50, this.initialWidth + deltaX)
        this.height = Math.max(50, this.initialHeight + deltaY)
      }
    },

    // 处理鼠标释放
    handleMouseUp() {
      if (this.isDragging) {
        this.isDragging = false
        this.$refs.draggableDiv.style.cursor = 'default'
      }

      if (this.isResizing) {
        this.isResizing = false
        this.$refs.draggableDiv.style.cursor = 'default'
      }
    }
  },
  mounted() {
    // 监听鼠标移动和释放事件
    document.addEventListener('mousemove', this.handleMouseMove)
    document.addEventListener('mouseup', this.handleMouseUp)
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener('mousemove', this.handleMouseMove)
    document.removeEventListener('mouseup', this.handleMouseUp)
  }
}
</script>
<style scoped>
.mainbox {
  width: 100%;
  height: 100%;
}
.xjimg {
  width: 1184px;
  height: 698px;
}

.hzbh {
  position: absolute !important;
  top: 109px;
  left: 215px;
  width: 130px !important;
  border: 1px solid transparent;
}
.hzbh .el-input__inner {
  height: 35px !important;
  border: none !important;
  border-radius: 0px;
  background-color: transparent;
}

.hzname {
  top: 109px;
  left: 137px;
  width: 180px !important;
}
.hzage {
  top: 159px;
  left: 137px;
  width: 180px !important;
}
.hzhex {
  position: absolute;
  top: 219px;
  left: 217px;
}
/* .ktdiv {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.452);
  width: 200px;
  height: 100px;
  position: absolute;
  left: 300px;
  top: 300px;
} */
.ktdiv {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.452);
  position: absolute;
  /* 初始宽高和位置通过JS控制，保持与您原有设置一致 */
}

/* 右下角调整大小的手柄样式 */
.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0;
  bottom: 0;
  background-color: rgba(207, 207, 207, 0.144);
  cursor: se-resize;
}
</style>
